import React from 'react'
import { Input, Button, Table } from 'antd'
import css from './style.less'
import TableFooter from './TableFooter'
import getComponentConfig from './makeTableResizeCols'
import TreeSelect from './TreeSelect'
import Demo from 'components/resizable' // eslint-disable-line

const MyTable = props => <div data-table="resize" className="test"><table {...props} data-test="table-wrap" /></div>

function genColumns(len = 20) {
  let res = []
  for (let i = 0; i < len; i++) {
    res.push({
      title: 'col ' + i.toString(),
      dataIndex: i.toString(),
      className: 'special' + i,
      'data-id': 'special' + i,
      dataNoresize: true,
      'data-test': 'resize',
      onHeaderCell: (record) => {
        return {
          width: '100px',
          'data-resize-id': `resize-${i.toString()}`
        }
      }
    })
  }
  return res
}
const components = {
  table: MyTable,
}
function genDataSource(len, dataLength) {
  let res = [];
  for (let i = 0; i < len; i++) {
    let obj = {}
    obj['index'] = i;
    for (let j = 0; j < dataLength; j++) {
      if (j === 5) {
        obj[j.toString()] = 100
      } else {
        obj[j.toString()] = 'data ' + i.toString();
      }
    }
    res.push(obj)
  }
  return res
}
let reduceCount = 0
class HomePage extends React.Component {
  state = {
    visible: false,
    addClass: css.animation,
    columns: genColumns(10),
    showTable: true
  }
  handleOnClick = (ev) => {
    this.setState((prevState) => {
      return {
        visible: !prevState.visible
      }
    })
  }
  handleOnChange = (ev) => {
    this.setState({
      value: ev.target.value
    })
  }
  handleReduce = () => {
    this.setState({
      columns: this.state.columns.filter((item) => {
        return item.dataIndex !== reduceCount.toString()
      })
    })
    reduceCount++
  }
  recoverCol = () => {
    this.setState({
      columns: genColumns(10),
    })
  }
  handleToggleRemoveTable = () => {
    this.setState({
      showTable: !this.state.showTable
    })
  }
  render() {
    let dataSource = genDataSource(5, 20)
    return (
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <div style={{ marginTop: '10px' }} />
        <TreeSelect />
        <Button onClick={this.handleReduce}>Reduce Columns</Button>
        <Button onClick={this.handleToggleRemoveTable} type="primary">Toggle remove table</Button>
        <Button onClick={this.recoverCol}>Recover</Button>
        <Input value={this.state.value} onChange={this.handleOnChange} />
        {
          true &&
          <Table
            dataSource={dataSource}
            columns={this.state.columns}
            rowKey={'index'}
            bordered
            scroll={{ x: 1000 }}
            components={getComponentConfig()}
            footer={
              () => <TableFooter
                footerCols={[{
                  targetColClass: 'special0',
                  content: '1111'
                }, {
                  targetColClass: 'special5',
                  content: 'Total',
                  style: { textAlign: 'right', padding: '0 4px' }
                }, {
                  targetColClass: 'special6',
                  content: <b>55555</b>
                }, {
                  targetColClass: 'special7',
                  content: <span style={{ backgroundColor: '#f90', color: '#fff', height: '20px' }}>777</span>
                }, {
                  targetColClass: 'special8',
                  content: '9999999'
                }]}
              />
            }
          />
        }
        <Demo />
      </div>
    )
  }
}

export default HomePage
